import React, { Component } from 'react';
import { NavLink, Link } from 'react-router-dom';
import leftNavStyle from './leftNavStyle.scss';
import authCheck from '@/tool/authCheck';

const LeftMenu = [
    { name: '房源', path: '/房源', icon: '/static/alliance2/image/leftNav/fangyuan.png', storeRule: '*', adminRule: '房源' },
    { name: '合同', path: '/合同', icon: '/static/alliance2/image/leftNav/hetong.png', storeRule: '*', adminRule: '合同' },
    { name: '人员', path: '/人员', icon: '/static/alliance2/image/leftNav/renyuan.png', storeRule: '*', adminRule: '人员' },
    { name: '智能锁', path: '/智能锁', icon: '/static/alliance2/image/leftNav/suo.png', storeRule: '智能锁管理', adminRule: '智能锁' },
    { name: '维修', path: '/维修', icon: '/static/alliance2/image/leftNav/weixiu.png', storeRule: '*', adminRule: '维修' },
    { name: '财务', path: '/财务', icon: '/static/alliance2/image/leftNav/caiwu.png', storeRule: '*', adminRule: '财务' },
    { name: '金融', path: '/金融', icon: '/static/alliance2/image/leftNav/jinrong.png', storeRule: '*', adminRule: '金融' },
    { name: '设置', path: '/设置', icon: '/static/alliance2/image/leftNav/shezhi.png', storeRule: '*', adminRule: '设置' }
];

class LeftNav extends Component {
    render() {
        const authChecKMenu = LeftMenu.filter(val => {
            return authCheck(val.storeRule, val.adminRule);
        });
        let navList = authChecKMenu.map((val, index) => {
            return (
                <li key={index}>
                    <NavLink to={val.path} activeClassName={leftNavStyle.active}>
                        <div className={leftNavStyle['nav-item']}>
                            <div className={leftNavStyle['icon']} style={{ backgroundImage: `url(${val.icon})` }} />
                            <span>{val.name}</span>
                        </div>
                    </NavLink>
                </li>
            );
        });
        return (
            <div className={leftNavStyle['left-nav']}>
                <div className={leftNavStyle['left-logo']}>
                    <Link to="/">
                        <img className={leftNavStyle['icon']} src="/static/alliance2/image/logo.png" />
                        <span>住家租房</span>
                    </Link>
                </div>
                <ul>
                    {navList}
                </ul>
            </div>
        );
    }
}

export default LeftNav;